<template>
	<view class="viewpage">
		<u-navbar :is-back="false" title="智能充电站" :background="background" :border-bottom="false" title-color="#ffff"
			title-size="36"></u-navbar>
		<!-- <u-upload ref="uUpload" action="http://192.168.1.188:8088/pd/sys/common/upload" :auto-upload="true" ></u-upload> -->
		<view class="scale" @click="sacancode">
			<div class="gis-live">
				<div class="shineCircle">
					<image class="imgscale"
						src="http://bytedev-gd8d.oss-cn-shenzhen.aliyuncs.com/upload/2021-9-10/1631260684478编组 4@2x.png"
						mode=""></image>
				</div>
				<div class="shineCircle2"></div>
				<div class="shineCircle3"></div>
			</div>
		</view>

		<view class="content">
			<view>扫码充电</view>
			<view @click="toInput">手动输入编号充电</view>
		</view>
		<view class="info-card">
			<view class="_top" @click="paymoeny">
				<view class="left">
					<view class="label">口袋币: </view>
					<view class="money"> {{userinfo.pdCoins == null ? '请登录查看口袋币' : userinfo.pdCoins+'PdCoin'}} </view>
				</view>
				<view class="right">查看 </view>
			</view>
			<view class="list">
				<view class="li" @click="urlnav">
					<image
						src="http://bytedev-gd8d.oss-cn-shenzhen.aliyuncs.com/upload/2021-9-10/1631262478840汽车相关-充电站@2x.png"
						mode=""></image>

					<view class="tab_text">寻找电站</view>

				</view>
				<view class="li" @click="toOrderList">
					<image v-if="indexnumber.sucessOrderCount > 0"
						src="http://bytedev-gd8d.oss-cn-shenzhen.aliyuncs.com/upload/2021-9-10/1631262833816订单@2x.png"
						mode=""></image>
					<image v-if="indexnumber.sucessOrderCount == 0"
						src="https://pocket-dev.oss-cn-shenzhen.aliyuncs.com/upload/rOKjV39NuKGT0042ccafc9c063f59b5f119cec3f2a03_1632900783125.png"
						mode=""></image>
					<view class="tab_text" v-if="indexnumber.sucessOrderCount > 0">订单列表</view>
					<view class="tab_text" v-if="indexnumber.sucessOrderCount == 0" style="color:#CCCCCC">订单列表</view>

				</view>
				<view class="li" @click="online">
					<image v-if="indexnumber.runOrderCount > 0"
						src="http://bytedev-gd8d.oss-cn-shenzhen.aliyuncs.com/upload/2021-9-10/1631262854218手机充电@2x.png"
						mode=""></image>
					<image v-else-if="indexnumber.runOrderCount == 0"
						src="https://pocket-dev.oss-cn-shenzhen.aliyuncs.com/upload/XHuutp7PzOjI095eca53779a57e8ebe9fb927a4b445a_1632895587246.png"
						mode=""></image>
					<view class="tab_text" v-if="indexnumber.runOrderCount > 0">正在进行</view>
					<view class="tab_text" v-if="indexnumber.runOrderCount == 0" style="color:#CCCCCC">正在进行</view>

				</view>
			</view>
			<view class="line"> </view>
			<view class="info_list">

				<view class="info_li">
					{{ indexnumber.recentlyCharginPile == 0 ? '附近无充电站':'最近'+indexnumber.recentlyCharginPile}} </view>
				<view class="info_li">
					{{indexnumber.sucessOrderCount ==0 ? '无充电记录':'充电'+indexnumber.sucessOrderCount+'次'}} </view>
				<view class="info_li">{{indexnumber.runOrderCount == 0 ? '暂无进行中':indexnumber.runOrderCount+'个订单'}}
				</view>
			</view>
		</view>
		<view class="copyright">
			<view>Copyright©2021</view>
			<view>领程工场软件科技 IOT物联网平台</view>
		</view>


		<view class="dialog_warp" v-if="bindPhoneVisible">
			<view class="masker"> </view>
			<view class="dialog_body">
				<image class="close_icon" src="../../static/images/icons/icon-close@2x.png" @click="closeBindPhone"
					mode=""></image>
				<view class="title">
					<image src="../../static/images/icons/icon-tips@2x.png" mode=""></image>
					绑定手机
				</view>
				<view class="input_box phone_box">
					<view class="left">
						<image src="../../static/images/icons/icon-phone@2x.png" mode="" v-if="!mobile"></image>
						<image src="../../static/images/icons/icon-acitve-phone@2x.png" mode="" v-else></image>
						<u-input v-model="mobile" placeholder="请输入手机号" @blur="phoneBlur" @input="phoneInput"
							type="number" maxlength="11" />
					</view>
					<view class="error" v-if="moblieError">{{moblieError}} </view>
				</view>


				<view class="input_box code_box">
					<view class="left">
						<image src="../../static/images/icons/icon-pass.png" mode="" v-if="!codeValue"></image>
						<image src="../../static/images/icons/icon-active-pass@2x.png" mode="" v-else></image>
						<u-input v-model="codeValue" placeholder="请输入验证码" type="number" />
					</view>
					<view class="verification_code">
						<u-verification-code :seconds="60" change-text="Xs重新发送" @end="end" @start="start" ref="uCode"
							@change="codeChange"></u-verification-code>
						<view class="_btn" @tap="getCodeHandle">{{codeTips}}</view>
					</view>
				</view>

				<view class="submit_btn" @click="confirmBindPhoneFn" type="success" lang="zh_CN" :ripple="true"
					shape="circle">确定</view>

			</view>

		</view>

		<u-modal v-model="wxloginmodal" @confirm="confirm" :async-close="true">

			<u-button type="success" lang="zh_CN" @click="wxLogin" shape="circle">
				微信登录</u-button>
		</u-modal>


		<u-mask :show="showTipsVisible" :mask-click-able="false" :duration="400" :zoom="false"
			:custom-style="{ background: 'rgba(0, 0, 0, 0.5)' }">
			<view class="dialog_warp">
				<view class="dialog_body">
					<image class="close_icon" src="../../static/images/icons/icon-close@2x.png"
						@click="showTipsVisible=false" mode=""></image>
					<view class="title">
						<image src="../../static/images/icons/icon-tips@2x.png" mode=""></image>
						温馨提示
					</view>
					<view class="content">您的口袋币余额不足</view>
					<view class="_btns">
						<view class="_btn" @click="paymoeny">立即充值</view>
						<!-- <view class="_btn _btn1" @click="showTipsVisible=false">其它方式</view> -->
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {
		sendMsmForBindingPhone,
		bindingPhone,
		loginForWechat,
	} from "../../api/login";
	import {
		findTenantsPay,
		findCharginByCode,
		indexForCharginPile
	} from '../../api/charging';
	import {
		wx_login,
		wx_getUserProfile
	} from "../../api/wxApi.js";
	import {getUrlParam} from '../../utils/untils'
	export default {
		data() {
			return {
				code: '',
				showTipsVisible: false,
				wxloginmodal: false,
				background: {
					backgroundColor: 'transparent'
				},
				userinfo: {
					pdCoins: 0
				},
				mobile: '',
				codeValue: '',
				moblieError: '',
				bindPhoneVisible: false,
				model: {},
				codeTips: '',
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					code: [{
							required: true,
							message: '请输入验证码',
							trigger: ['change', 'blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change', 'blur'],
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
							message: '需同时含有字母和数字，长度在6-12之间',
							trigger: ['change', 'blur'],
						}
					],

				},
				query: {
					latitude: null,
					longitude: null,
					pageNo: 1,
					pageSize: 1
				},
				indexnumber: {
					recentlyCharginPile: null,
					sucessOrderCount: 0,
					runOrderCount: 0,

				}
			};
		},
		methods: {
			checkinfo() {

				let _this = this
				console.log(_this.query)
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						_this.query.longitude = res.longitude
						_this.query.latitude = res.latitude

						indexForCharginPile(_this.query).then(res => {
							console.log(res)
							_this.indexnumber = res.result
						})
					}, 
					fail: function(res2) {
                        console.log('请授权定位')
						// uni.showToast({
						// 	title: '请授权定位',
						// 	icon: 'error',
						// 	duration: 2000
						// });
					}
				});
			},
			sacancode() {
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {

						console.log('条码内容：', res.result);
						
						let deviceCode = res.result
						
							
						if(deviceCode.split("?=") != -1){
							deviceCode = deviceCode.split("?=")
							
							findCharginByCode({
								deviceCode: deviceCode[1]
							}).then(res2 => {
								if (res2.code == 200) {
							
							
									uni.navigateTo({
							
										url: '../Charging-pile/select-port?deviceCode=' + res2
											.result.pdCharginWxd.deviceCode
									})
									console.log('跳转');
								} else {
									uni.showToast({
										title: '充电站不存在',
										duration: 2000,
										icon: 'error'
									});
								}
							});
						}else{
							uni.showToast({
								title: '非法二维码',
								duration: 2000,
								icon: 'error'
							});
						}
				
						
					}
				});
			},
			online() {

				if (this.indexnumber.runOrderCount > 0) {
					uni.navigateTo({
						url: '../Charging-pile/status'
					})
				} else {
					uni.showToast({
						title: '没有进行的订单',
						duration: 2000,
						icon: 'error'
					});
				}

			},
			//跳转
			navurl(url) {
				uni.navigateTo({
					url: url
				})
			},
			async wxLogin() {
				console.log(1);
				let _this = this;
				console.log(this.code);
				console.log(2);
				if (this.code) {
					wx_getUserProfile().then(res => {
						//发起网络请求
						console.log('登录！', res2)
						let date = {
							code: res2.code,
							rawData: res.rawData,
							signature: res.signature,
							wxUserInfoRequest: {
								iv: res.iv,
								encryptedData: res.encryptedData,
							}
						}

						loginForWechat(date).then(res3 => {
							console.log(res3, '登录接口请求')

							uni.setStorageSync('userInfo', res3.result);
							uni.setStorageSync('token', res3.result.token);

							_this.toLogin(res3)
						})
					})
				} else {
					this.code = await wx_login();
					console.log('登录失败！')
				}
			},
			//绑定手机号
			confirmBindPhoneFn() {
				let _this = this;
				if (this.mobile && this.codeValue) {
					bindingPhone({
						code: this.codeValue,
						phoneNum: this.mobile
					}).then(res => {
						uni.showToast({
							title: '绑定成功！',
							duration: 2000
						});
					})
				} else {
					if (this.mobile == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入手机号',
							duration: 2000
						});
						return
					}
					if (this.codeValue == '') {
						uni.showToast({
							icon: "none",
							title: '请输入验证码',
							duration: 2000
						});
						return
					}
				}
			},
			codeChange(text) {
				this.codeTips = text;
			},
			//获取验证码
			getCodeHandle() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})

					sendMsmForBindingPhone(this.mobile).then(res => {
						if (res.code == 200) {
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.hideLoading();
							// 通知验证码组件内部开始倒计时
							this.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}
					})


				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('倒计时开始');
			},
			maskClick(e) {
				console.log(e)
			},
			closeBindPhone() {
				this.bindPhoneVisible = false
			},
			urlnav() {
				uni.navigateTo({
					url: '../Charging-pile/find'
				})
			},
			paymoeny() {
				uni.navigateTo({
					url: '../Charging-pile/topUp-center'
				})
			},
			toInput() {
				uni.navigateTo({
					url: '../Charging-pile/input'
				})
			},
			toOrderList() {

				if (this.indexnumber.sucessOrderCount > 0) {
					uni.navigateTo({
						url: '../Charging-pile/order-list'
					})
				} else {
					uni.showToast({
						title: '没有订单',
						duration: 2000,
						icon: 'error'
					});
				}
			},
			phoneBlur() {
				if (this.mobile == '') {
					this.moblieError = '请输入手机号'
					return
				}
				if (!this.$u.test.mobile(this.mobile)) {
					this.moblieError = '手机号码不正确'
					return
				}
				this.moblieError = ''
			},
			//查询用户钱包
			checkpay() {
				findTenantsPay().then(res => {
					console.log(res, '111')
					this.userinfo = res.result

					if (res.result.pdCoins == 0) {
						this.showTipsVisible = true
					}

				})
			},
			
			//判断登录弹窗提示
			checklogin() {
				uni.showModal({
					title: '提示',
					content: '充电站需登录即可获取更多功能',
					cancelText: '继续浏览',
					confirmText: '登录浏览',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');

							uni.reLaunch({
								url: '../login/loginwechat'
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}

		},
		async onLoad() {
			this.code = await wx_login();
			let token = uni.getStorageSync('token')



			//判断用户是否已登录

			if (!token) {
				this.checklogin()

			} else {
				this.checkpay()

				this.checkinfo()
			}

		},
		onShow() {
            let token = uni.getStorageSync('token')
            
            
            
            //判断用户是否已登录
            
            if (token) {
                this.checkpay()
            
            	this.checkinfo()
            
            } 
		},
		onShareAppMessage(res) {
			return {
				title: '邀请您使用智能充电站',
				path: '/pages/index/index',
				success: function(res) {
					// 转发成功
					wx.showToast({
						title: '分享成功',
						icon: 'none'
					})
				},
				fail: function(res) {
					// 转发失败
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.viewpage {
		width: 100%;
		min-height: 100%;
		background-image: url('http://bytedev-gd8d.oss-cn-shenzhen.aliyuncs.com/upload/2021-9-10/1631259459022编组 8@2x.png');
		background-size: 100%;
	}

	.content {
		width: 100%;
		text-align: center;
		margin-bottom: 88rpx;

		view:nth-child(1) {
			font-size: 40rpx;
			font-weight: 400;
			color: #ffffff;
			margin-bottom: 24rpx;
		}

		view:nth-child(2) {
			font-size: 28rpx;
			font-weight: 400;
			color: #add4ec;
			padding-top: 24rpx 0;
		}
	}

	.info-card {
		width: 690rpx;
		margin: 0 auto;
		background-color: #ffffff;
		border-radius: 28rpx;
		overflow: hidden;

		._top {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 58rpx;
			align-items: center;

			box-shadow: 0rpx 0rpx 20rpx 4rpx rgba(10, 52, 139, 0.12);

			.left {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;

				.label {
					color: #303133;
				}

				.money {
					color: #0A348B;
				}
			}

			.right {
				width: 100rpx;
				height: 46rpx;
				background: #0A348B;
				border-radius: 12rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				font-weight: 400;
				text-align: center;
				line-height: 44rpx;
			}
		}

		.list {
			margin: 36rpx auto;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 400;
			color: #0a348b;

			.li {
				width: 33%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 44rpx;
					height: 44rpx;
				}

				.tab_text {
					font-size: 28rpx;
					margin-top: 6rpx;
				}
			}

			.li:last-child {
				border-right: 0rpx solid #6a93e9;
			}
		}

		.line {
			background-color: rgba(236, 236, 236, 1);
			height: 2rpx;
			width: 630rpx;
			margin: 0rpx auto;
		}

		.info_list {
			margin: 36rpx auto;
			display: flex;
			align-items: center;
			justify-content: center;

			.info_li {
				display: flex;
				justify-content: center;
				width: 33%;
				font-size: 26rpx;
				color: #000000;
				font-weight: 400;
			}
		}

	}

	.dialog_warp {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		top: 0;
		z-index: 77;
		width: 100%;
		height: 100%;
		padding: 0rpx 30rpx;

		.error {
			font-size: 24rpx;
			font-weight: 400;
			color: #FABA30;
		}

		.masker {
			position: absolute;
			width: 100%;
			height: 100%;
			background-color: #0000007a;
			z-index: 0;
		}

		.dialog_body {
			position: relative;
			z-index: 2;
			width: 660rpx;
			height: 430rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			background-color: #FFFFFF;
			margin-top: -100rpx;

			.close_icon {
				position: absolute;
				right: 42rpx;
				top: 52rpx;
				width: 32rpx;
				height: 32rpx;
			}

			.title {
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 36rpx;
				color: #000000;
				margin-top: 44rpx;
				margin-bottom: 66rpx;

				image {
					margin-right: 24rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.input_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 610rpx;
				border-bottom: 2rpx solid #F1F1F1;
				margin: 10rpx auto;

				.left {
					display: flex;
					align-items: center;
				}

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 18rpx;
				}

				.phone_input {}
			}

			.code_box {
				margin-top: 50rpx;
				margin-bottom: 66rpx;

				._btn {
					font-size: 28rpx;
					font-weight: 400;
					color: #0A348B;

				}
			}

			.submit_btn {
				width: 610rpx;
				height: 90rpx;
				background: #0A348B;
				border-radius: 20rpx;
				font-weight: 400;
				color: #FFFFFF;
				font-size: 34rpx;
				text-align: center;
				line-height: 90rpx;
				margin: 0rpx auto;
			}



		}
	}

	.dialog_warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding: 30rpx;
	}

	.dialog_body {
		position: relative;
		width: 690rpx;
		background: #ffffff;
		border-radius: 16rpx;
		background-color: #ffffff;
		flex-shrink: 0;
		padding: 30rpx;

		.close_icon {
			position: absolute;
			right: 42rpx;
			top: 52rpx;
			width: 32rpx;
			height: 32rpx;
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 400;
			font-size: 36rpx;
			color: #000000;
			margin-top: 44rpx;
			margin-bottom: 66rpx;

			image {
				margin-right: 24rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.content {
			font-size: 32rpx;
			text-align: center;
		}

		._btns {
			display: flex;
			justify-content: space-between;

			._btn {
				width: 100%;
				background-image: url('https://pocket-dev.oss-cn-shenzhen.aliyuncs.com/upload/G0RTEANAIfwR7ba90e63426d3b678ba6937bfff3e3c9_1632713767196.png');
				background-size: 100%;
				height: 90rpx;
				line-height: 88rpx;
				color: #fff;
				border-radius: 20rpx;
				text-align: center;
			}

			._btn1 {

				background: #C0C4CC;
			}
		}
	}
</style>
